<template>
	<view class="select-box">
	  <view class="select-current" @click="openClose">
	    <text class="current-name">{{current.name}}</text>
	  </view>
	  <view class="option-list" v-if="isShow" >
	    <!-- <text class="option"
	      data-id="{{defaultOption.id}}"
	      data-name="{{defaultOption.name}}">{{defaultOption.name}}
	    </text> -->
	    <text class="option"
	      v-for="(item) in result"
	      :key="item.id" 
		  @click="optionTap(item)">
	    	  {{item.name}}
	    </text>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				result: [],
				isShow: false,
				current: {}
			};
		},
		props:{
			options: {
			  type: Array,
			  value: []
			},
			defaultOption: {
			  type: Object,
			  value: {
				id: '000',
				name: '请选择'
			  }
			},
			mykey: {
			  type: String,
			  value: 'id'
			},
			text: {
			  type: String,
			  value: 'name'
			}
		},
		methods:{
			optionTap(item) {
				// console.log(item)
			  // let dataset = e.target.dataset
			  this.current = item
			  this.isShow = false
				
			  // 调用父组件方法，并传参
			  this.$emit("change", item)
			},
			openClose() {
				this.isShow = !this.isShow
				this.$emit("open")
			},
		
			// 此方法供父组件调用
			close() {
			  this.isShow = false
			}
		  },
		  // mounted() {
		  // 	console.log("mounted")
		  // },
		  mounted(){
			  // console.log("activated")
			  // 属性名称转换, 如果不是 { id: '', name:'' } 格式，则转为 { id: '', name:'' } 格式
			  let result = []
			  // console.log(this.options)
			  
			  this.options.map((v)=>{
				  // 解构对象 使用 {}
				  // 给新的变量名赋值 -- 使用 :
				  // 对象属性计算名和解构  -  使用 []
				  let {[this.mykey]: id, [this.text]: name} = v
				  result.push({ id, name })
			  })
			  
			  
			  // if (this.mykey !== 'id' || this.text !== 'name') {       
					// for (let item of this.options) {
					//   let { [this.mykey]: idd, [this.text]: name } = item
					//   result.push({ idd, name })
					// }
			  // }
			  let current = result.length ? result[0] : this.defaultOption
			  // console.log(current)
			  this.current = current;
			  // console.log(result)
			  this.result = result
		  }
		  
		
	}
</script>

<style lang="scss">
.select-box {
  position: relative;
  width: 100%;
  font-size: 30rpx;
}

.select-current {
  position: relative;
  width: 100%;
  padding: 0 10rpx;
  line-height: 70rpx;
  border: 1rpx solid #ddd;
  border-radius: 6rpx;
  box-sizing: border-box;
}

.select-current::after {
  position: absolute;
  display: block;
  right: 16rpx;
  top: 30rpx;
  content: '';
  width: 0;
  height: 0;
  border: 10rpx solid transparent;
  border-top: 10rpx solid #999;
}

.current-name {
  display: block;
  width: 85%;
  height: 100%;
  word-wrap: normal;
  overflow: hidden;
}

.option-list {
  position: absolute;
  left: 0;
  top: 76rpx;
  width: 100%;
  padding: 12rpx 20rpx 10rpx 20rpx;
  border-radius: 6rpx;
  box-sizing: border-box;
  z-index: 99;
  box-shadow: 0rpx 0rpx 1rpx 1rpx rgba(0, 0, 0, 0.2) inset;
  background-color: #fff;
  max-height: 320rpx;  
  overflow-y: scroll;
}

.option {
  display: block;
  width: 100%;
  line-height: 70rpx;
  border-bottom: 1rpx solid #eee;
}

.option:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

</style>
